<template>

	<view class="mainbgc">
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;padding-top: 30rpx;">
					<view class="strongtext">时间</view>
					<view class="flexleft" style="flex-wrap: wrap;">
						<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
							@click="change(item.name,index)">
							<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="strongtext margin_top">自定义时间</view>
					<view class="flexleft">
						<view class="inputscreenbox flexcenter" @click="shows=true">
							<input class="itemscreen margin_top" type="text" disabled v-model="start">
						</view>
						<view class="zwscreenbox flexcenter">
							<view class="strongtext">-</view>
						</view>
						<view class="inputscreenbox flexcenter" @click="showss=true">
							<input class="itemscreen margin_top" type="text" disabled v-model="end">
						</view>
					</view>
					<view class="strongtext margin_top">状态</view>
					<view class="flexleft" style="flex-wrap: wrap;">
						<view class="screenbox flexcenter" v-for="(item,index) in statuslist" :key="item.id"
							@click="changestatus(item.id)">
							<view :class="currentstatus == item.id?'itemscreenfocus margin_top':'itemscreen margin_top'">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="flexbetween selectboxtop2 margin_top" @click="selectRole('/pages/workbench/jiben/kehuda?type=1')">
						<input type="text" placeholder="选择客户" disabled="true" v-model="custom_name">
						<view class="righticon2"></view>
					</view>
					<view class="flexbetween selectboxtop2 margin_top" @click="selectRole('/pages/workbench/jiben/yuangongda?type=1',1)">
						<input type="text" placeholder="选择送货员" disabled="true" v-model="send_staff_name">
						<view class="righticon2"></view>
					</view>
					<view class="flexbetween selectboxtop2 margin_top" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2',2)">
						<input type="text" placeholder="选择经办人" disabled="true" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</scroll-view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
		<header-top :messageInfo="{typeFlag:true,message:'退货单查询',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft" @click="show=true">筛选</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="flexbetween">
				<input class="input-text" type="text" placeholder="请输入搜索内容" v-model="keywords">
				<view class="sousuo" @click="init()">搜索</view>
			</view>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<!-- <view class="mainpadding_top ffffff radius flexaround"> -->
			<view class="mainpadding_top ffffff radius flexleft" v-for="item in list.data" :key="item.id">
				<view class="littleimg">
					<!-- 选中 -->
					<view class="selecticon" v-show="item.is_check" @click="changeCheck(item)">
						<image src="@/static/image/system/dui.png" mode=""></image>
					</view>
					<!-- 未选中 -->
					<view class="noselecticon" v-show="!item.is_check" @click="changeCheck(item)"></view>
				</view>
				<view class="bigimg" @click="jumpdetail(item.id,47)">
					<view class="flexbetween">
						<view class="flexleft">
							<view class="nostrongtext margin_right">{{item.order_no}}</view>
							<view class="addresstext margin_right" style="color: #ff0000;" v-show="item.is_bj==2">变价
							</view>
							<view class="addresstext" style="color: #ff0000;" v-show="item.is_ht==2">含退</view>
						</view>
						<!-- 0=全部,10=待审核,20=待取货,30=待入库,40=已完成,50=已作废,60=已拒绝,70=拒收 -->
						<view class="wlable radius" v-show="item.status==10">待审核</view>
						<view class="clable radius" v-show="item.status==20">待取货</view>
						<view class="wlable radius" v-show="item.status==30">待入库</view>
						<view class="shlable radius" v-show="item.status==40">已完成</view>
						<view class="hlable radius" v-show="item.status==50">已作废</view>
						<view class="hlable radius" v-show="item.status==60">已拒绝</view>
						<view class="hlable radius" v-show="item.status==70">拒收</view>
					</view>
					<view class="margin_top2 flexbetween">
						<view class="flexleft">
							<view class="titletext">{{item.custom.name}}</view>
							<view class="namecolor" style="margin-left: 20rpx;">
								{{item.custom.username}}</view>
							<view class="flexright">
								<view class="littleblue" @click.stop="phone(item.custom.mobile)"></view>
							</view>
						</view>
						<view class="margin_top2 ywy" v-if="item.custom.costom_level_info">{{item.custom.costom_level_info.name}}</view>
					</view>
					<view class="margin_top2 ywy flexbetween">
						<view class="flexstart">
							<view class="">经办人：{{item.staff.username}}</view>
							<view class="dizhiimg" @click.stop="phone(item.staff.mobile)"></view>
						</view>
						<view>{{item.createtime_text}}</view>
					</view>
					<view class="flexbetween">
						<view class="margin_top2 ywy xiankuan">地址：{{item.custom.cityinfo}}{{item.custom.address}}</view>
						<view class="addressicon margin_right" @click.stop="openmap(item)"></view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="ywy">合计：<text class="xiaolan">{{item.total_price}}</text></view>
						<view class=" ywy">数量：{{item.goods_zl_num}}种/{{item.goods_num}}件{{Number(item.goods_sendnum)?"（含赠品）":""}}</view>
					</view>
					<view class="margin_top2 ywy yihang" v-show="item.notes">备注：{{item.notes}}</view>
					<view class="flexright margin_top2">
						<view class="xiaolankuang flexbetween margin_left2" style="border-color: #1ED76D;"  v-if="item.status==10"
							@click.stop="examine(item,item.id,48)">
							<u-icon name="android-fill" color="#1ED76D" size="16"></u-icon>
							<view class="xiaolan margin_left1" style="color: #1ED76D;">审核</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pagebottom flexbetween">
			<view class="pagebottom_left flexcenter" @click="changeAllCheck">
				<view class="">
					<view class="selecticon" v-show="list.is_all">
						<image src="@/static/image/system/dui.png" mode=""></image>
					</view>
					<view class="noselecticon" v-show="!list.is_all"></view>
				</view>
				<view><text class="allchange">全选</text></view>
			</view>
			<view class="flexaround">
				<text class="pagebottom_fahuo" @click="submit(50)">统计</text>
			</view>
		</view>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			 @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" @close="showss=false"></u-datetime-picker>
		<u-modal :show="examineShow" title="审核" @confirm="examineConfirm" showCancelButton @cancel="examineShow=false">
			<view class="slot-content">
				<view class="mainpadding_top">
					<u-radio-group v-model="examineType" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="审核通过"
							name="20"></u-radio>
						<u-radio activeColor="#0BBDCB" label="作废" name="50"></u-radio>
					</u-radio-group>
					<template v-if="examinedata.ly_type!=1 && examineType==20">
						<view class="flexbetween margin_top" @click="selectRole('/pages/workbench/jiben/cangkuda?type=1')">
							<input type="text" placeholder="请选择仓库" disabled="" v-model="thdstorageck.warehouse_name">
							<view class="righticon2"></view>
						</view>
						<view class="flexbetween margin_top" v-if="examinedata.ps_type==2" @click="selectRole('/pages/workbench/jiben/yuangongda?type=1',3)">
							<input type="text" placeholder="请选择送货员" disabled v-model="thdstorageshy.staff_name">
							<view class="righticon2"></view>
						</view>
					</template>
				</view>
			</view>
		</u-modal>
	</view>

</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				keywords: "",
				page: 1,
				limit: 12,
				list: {
					data: [],
					is_all: false
				},
				show: false,
				// 时间选择
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				// 审核
				statuslist: [ //0=全部,10=待审核,20=待取货,30=待入库,40=已完成,50=已作废,60=已拒绝,70=拒收
					{
						id: 10,
						name: '待审核'
					},
					{
						id: 20,
						name: '待取货'
					},
					{
						id: 30,
						name: '待入库'
					},
					{
						id: 40,
						name: '已完成'
					},
					{
						id: 50,
						name: '已作废'
					},
					{
						id: 60,
						name: '已拒绝'
					},
					{
						id: 70,
						name: '拒收'
					},
				],
				// 时间筛选
				currents: -1,
				currentstatus: -1,
				labledj: -1,
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				// 审核
				examineType: "20",
				examineShow: false,
				examineId: "",
				examinedata:{},
				custom_name:"",
				custom_id:"",
				send_staff_id:"",//送货员
				send_staff_name:"",
				staff_id:"",//业务员
				staff_name:"",
				selectType:1,//1选择送货员，2选择经办人，
				thdstorageck:{
					warehouse_id:"",
					warehouse_name:"",
				},//小程序默认的仓库
				thdstorageshy:{
					staff_id:"",
					staff_name:"",
				},//小程序默认的送货员
			}
		},
		onLoad(options) {
			if(options.type){
				this.currentstatus = options.type
			}
			this.init()
			if(uni.getStorageSync("thdstorageck")){
				this.thdstorageck =uni.getStorageSync("thdstorageck") 
			}
			if(uni.getStorageSync("thdstorageshy")){
				this.thdstorageshy =uni.getStorageSync("thdstorageshy") 
			}
		},
		onShow() {
			this.flag = ""
			let that = this
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				that.custom_id = data.id
				that.custom_name = data.name
				return false
			})
			uni.$off("ckSelectFn")
			uni.$on("ckSelectFn", data => {
				that.thdstorageck.warehouse_id = data.id
				that.thdstorageck.warehouse_name = data.name
				return false
			})
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				if(that.selectType==1){//送货员
					that.send_staff_id = data.id
					that.send_staff_name = data.name
				} else if(that.selectType==2){//经办人
					that.staff_id = data.id
					that.staff_name = data.name
				} else if(that.selectType==3){//选择提交的送货员
					that.thdstorageshy.staff_id = data.id
					that.thdstorageshy.staff_name = data.name
				}
				retu
				return false
			})
		},
		watch: {
			list: {
				deep: true,
				handler(newval) {
					let num = 0
					this.list.data.forEach(item => {
						if (item.is_check) {
							num++
						}
					})
					if (this.list.data.length == num) {
						this.list.is_all = true
					} else {
						this.list.is_all = false
					}
				}
			},
			"thdstorageck.warehouse_id"(){
				uni.setStorageSync("thdstorageck",this.thdstorageck)
			},
			"thdstorageshy.staff_id"(){
				uni.setStorageSync("thdstorageshy",this.thdstorageshy)
			},
		},
		methods: {
			
			selectRole(url,val) {
				this.selectType = val
				uni.navigateTo({
					url
				})
			},
			examine(item,id,qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				this.examineId = id
				this.examinedata = item
				this.examineShow = true
			},
			examineConfirm() {
				if(this.examinedata.ly_type!=1 && this.examineType==20){
					if(this.thdstorageck.warehouse_id==""){/*  */
						httpRequest.toast("请选择仓库")
						return false
					}
					if(this.thdstorageshy.send_staff_id=="" && this.examinedata.ps_type==2){
						httpRequest.toast("请选择送货员")
						return false
					}
				}
				this.examineShow = false
				let data = {
					id: this.examineId,
					status: this.examineType,
					warehouse_id:this.thdstorageck.warehouse_id,
					send_staff_id:this.thdstorageshy.staff_id
				}
				if(this.examinedata.ly_type==1){
					delete data.warehouse_id
					delete data.send_staff_id
				}
				if(this.examinedata.ly_type!=1 && this.examinedata.ps_type==1){
					delete data.send_staff_id
				}
				httpRequest.request('/dhtapi/Salethorder/applySalethOrder', 'GET', data, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/dhtapi/Salethorder/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keywords: this.keywords,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					status: this.currentstatus == -1 ? '' : this.currentstatus, //审核状态
					custom_id: this.custom_id,
					staff_id: this.staff_id,
					send_staff_id: this.send_staff_id,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						this.$set(res.data, 'is_all', false)
						res.data.data.forEach(item => {
							this.$set(item, 'is_check', false)
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			jumpdetail(id,qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/tuihuodxq?id=' + id
				})
			},
			// 单选
			changeCheck(item) {
				item.is_check = item.is_check ? false : true
			},
			// 多选
			changeAllCheck() {
				if (this.list.is_all) {
					this.list.is_all = false
					this.list.data.forEach(item => {
						item.is_check = false
					})
				} else {
					this.list.is_all = true
					this.list.data.forEach(item => {
						item.is_check = true
					})
				}
			},
			submit(qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				let arr = []
				this.list.data.forEach(item => {
					if (item.is_check) {
						arr.push(item.id)
					}
				})
				if (arr.length == 0) {
					httpRequest.toast("请选择需要汇总的数据")
					return
				}
				console.log(arr, "统计数据")
				let data = {
					type: 1, //1退货单，2采购单，3采购退货单，4入库单，5销售单
					arr: arr
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/tuihuodtjmx?data=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.custom.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.custom.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.custom.address, //即将传到高德或腾讯地图的店铺名称
					address: item.custom.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '结束时间';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			changestatus(index) {
				this.currentstatus = index;
			},
			changeslable(index) {
				this.labledj = index;
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 重置
			resetbtn() {
				this.currentstatus = -1
				this.currents = -1
				this.start = "开始时间"
				this.end = "结束时间"
				this.custom_name=""
				this.custom_id=""
				this.send_staff_id=""//送货员
				this.send_staff_name=""
				this.staff_id=""//业务员
				this.staff_name=""
				this.init()
				this.show = false
			},
			sureBtn() {
				this.show = false
				this.init()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.seletext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 28rpx;
	}

	.miancolor {
		color: #0BBDCB;
	}

	.smalltext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.ywy {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.clable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAA500;
		line-height: 28rpx;
		background-color: #f6eddd;
	}

	.hlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
		line-height: 28rpx;
		background-color: #f6e4e3;
	}

	.wlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: #fef7ec;
	}

	.needxiahua {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		border-bottom: 1rpx solid #0BBDCB;
	}

	.needbotborder {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e9e9e9;
	}

	.pagebottom {

		width: 100%;

		padding: 30rpx 30rpx 40rpx;

		box-sizing: border-box;

		background-color: #fff;

		position: fixed;

		bottom: 0;

	}

	.pagebottom_left {
		margin-left: 40rpx;
	}

	.pagebottom_right {
		margin-right: 100rpx;
	}

	.pagebottom_fahuo {
		color: #fff;
		padding: 10rpx 80rpx;
		font-size: 28rpx;
		border-radius: 30rpx;
		background-color: #0BBDCB;
		background-color: #00B855;
	}

	.allchange {
		margin-left: 20rpx;
	}

	.bigimg {
		width: 100%;
		margin-left: 30rpx;
	}

	.dizhitxt {
		font-size: 32rpx;
		color: #0BBDCB;
		font-weight: bold;
	}

	.dizhi {
		margin: 0 20rpx;
	}

	// 审核状态
	.wlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		line-height: 28rpx;
		background-color: #fef7ec;
	}

	.shlable {
		padding: 6rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		line-height: 28rpx;
		background-color: #e7f9fa;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	// 筛选内容
	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	// 筛选内容
	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}
</style>